<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-07-19 15:29:36
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 14:24:07
 * @FilePath: /amap-web-vr/src/views/home/control/vc-collect-list-control/vr-collect-my-list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-scrollbar height="95%"  ref="rootElement">
    <div v-for="item in collects" :key="item.data_id" class="infinite-list-item">
          <div class="content" @click="onClick(item)">
              <div class="content_title">
                  <el-icon :size="18"><LocationFilled /></el-icon>
                  <span>{{item.vr.name}}</span>
              </div>
              <el-icon><ArrowRight /></el-icon>
          </div>
      </div>
    </el-scrollbar>

</template>

<script lang="ts" setup>
import { ref,onMounted,} from 'vue';
import { LocationFilled,ArrowRight } from '@element-plus/icons-vue'
import type{ ZFVrCollectModel } from "../type";
import VcVrDetailDialog from "./vc-vr-detail-dialog.vue";
import { getVrCollectList } from "@/api/vr";
import { createComponent } from '@/components/createComponent';
import * as Cesium from 'cesium'
import { useCustomCesium } from "../useCustomCesium";
const {vueCesium} = useCustomCesium();
const collects = ref<ZFVrCollectModel[]>([]);
const page = ref(1)

const loadData= async()=>{
      var res = await getVrCollectList(page.value) as any;
      if (res.code == 200) {
        collects.value = res.data.data as ZFVrCollectModel[];
      }      
}

onMounted(()=>{
  loadData();
})


const onClick = (item:ZFVrCollectModel)=>{
  console.log("点击了vueCesium.viewer =" ,item)
  
   vueCesium.viewer.camera.flyTo({
     destination : Cesium.Cartesian3.fromDegrees(Number(item.vr.gt_id), Number(item.vr.lt_id), 5000.0),
     orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-40),
        roll: 0.0,
    },
  })

    if (vueCesium.viewer.entities.getById("vr_marker") != null) {
        vueCesium.viewer.entities.removeById("vr_marker");
    }
    vueCesium.viewer.entities.add({
        id:"vr_marker",
        position:Cesium.Cartesian3.fromDegrees(Number(item.vr.gt_id), Number(item.vr.lt_id)),
        point: {
            pixelSize: 10,
            color: Cesium.Color.RED,
        },
    })
   const {close} = createComponent(VcVrDetailDialog, {
    id: item.data_id.toString(),
    onTap: () => {
      close()
    }
  });
}


</script>


<style scoped lang="scss">
.content{
    width: 100%;
    padding: 5px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 0.1px #E5E5E5;
    &_title{
        display: flex;
        flex-direction: row;
        align-items: center;
        span{
            font-size: 12px;
            color: #333333;
            margin-left: 5px;
            max-width: 230px;
            overflow: hidden;
        }
    }
}
</style>